@()(implicit session: Session)
@background.main("根据题目类型统计"){


  <style>

          .portlet.box.blue-soft {
            border: 1px solid #3D7DBA;
          }

          .portlet.box.blue-soft > .portlet-title {
            background-color: #3D7DBA;
          }

  </style>

  <div class="row-fluid">

    <div class="row">

      <div class="col-md-12 col-sm-12">
        <div class="portlet blue-soft box">

          <div class="portlet-title">
            <div class="caption">
              按题目进行统计
            </div>
          </div>

          <div class="portlet-body" style="height: 800px;">

            <p>题目类型：</p>
            <div class="input-group" style="width: 100%;margin-top: 10px;margin-left: 20px" >

              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="1" name="class" style="margin-right: 5px;" onclick="filter()">生物安全相关法律法规</label>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="2" name="class" style="margin-right: 5px;" onclick="filter()">生物危害因子的风险评估</label>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="3" name="class" style="margin-right: 5px;" onclick="filter()">生物安全实验室的分级及管理</label>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="4" name="class" style="margin-right: 5px;" onclick="filter()">生物安全实验室设施</label>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="5" name="class" style="margin-right: 5px;" onclick="filter()">生物安全实验室关键设备</label>
              <br>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="6" name="class" style="margin-right: 5px;" onclick="filter()">消毒灭菌及废物处理</label>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="7" name="class" style="margin-right: 5px;" onclick="filter()">突发事故的处理和应急预案</label>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="8" name="class" style="margin-right: 5px;" onclick="filter()">实验室个人防护</label>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="9" name="class" style="margin-right: 5px;" onclick="filter()">菌毒种运输及管理</label>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="10" name="class" style="margin-right: 5px;" onclick="filter()">实验操作</label>

            </div>

            <p>专业类型：</p>
            <div class="input-group" style="width: 100%;margin-top: 10px;margin-left: 20px" >

              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="1" name="class_min" style="margin-right: 5px;" onclick="filter()">基础知识题</label>
              <label style="margin-right: 15px"><input type="checkbox" checked="checked" value="2" name="class_min" style="margin-right: 5px;" onclick="filter()">专业知识题</label>
            </div>


            <div id="toolbar"></div>
            <table class="table table-bordered table-hover " id="table" data-pagination="true" data-search="true"
            data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
            data-show-export="true" data-export-types="['excel']" data-export-data-type="all"
            data-export-options='{"fileName":"题库统计"}'
            >
              <thead>
                <tr>
                  <th data-field="question">题目</th>
                  <th data-field="percent">正确率</th>
                  <th data-field="correct">答对人数</th>
                  <th data-field="time">平均答题时间</th>
                  <th data-field="all">总人数</th>
                </tr>
              </thead>
            </table>

          </div>
        </div>
      </div>
    </div>
  </div>


  <script>

    $(function () {

        $.ajax({
          url:"@routes.BackgroundController.getAllQuestion()",
          type:"post",
          success:function (data) {
            $("#table").bootstrapTable({data:data});
          }
        })



    });


    function filter() {

      var classes = [];
      //当chekeBox被选中时，在arry中加入新选中的元素
      //:checkbox ：选取所有type为checkbox的元素
      $("input[name=class]:checked").each(function () {
        //在array的后面加上新的元素
        classes.push($(this).val())
      });

      var class_min = [];
      $("input[name=class_min]:checked").each(function () {
        class_min.push($(this).val())
      });

      $.ajax({
        url:"@routes.BackgroundController.getFilterQuestion()",
        type:"post",
        dataType:"json",
        data:{
            "classes" : classes,
            "class_min" : class_min
        },
        success: function (data) {
          $("#table").bootstrapTable('load', data);
        }
      })
    }


  </script>

}